
<template>
  <div class="min-h-screen bg-gray-50 ">

    <!-- 主内容区 -->
    <div class="ml-64 p-8 " style="min-width: 1000px; padding: 2rem;">
      <div class="mb-6 flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <el-radio-group v-model="currentTab" size="large" >
            <el-radio-button v-for="(tab, index) in tabs" :key="index" :label="tab.key">
              {{ tab.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <div class="flex items-center space-x-4">
          <el-input
            v-model="searchQuery"
            placeholder="搜索学生姓名/学号"
            class="w-64"
            :prefix-icon="Search"
          />
          <el-button type="primary" icon="Plus">添加学生</el-button>
        </div>
      </div>

      <!-- 数据统计卡片 -->
      <el-row :gutter="24" class="mb-8">
        <el-col :span="6" v-for="(stat, index) in statistics" :key="index">
          <el-card shadow="hover" class="h-full">
            <template #header>
              <div class="text-lg font-medium text-gray-600">{{ stat.label }}</div>
            </template>
            <div class="text-2xl font-bold text-gray-800">{{ stat.value }}</div>
            <div class="mt-2 text-sm" :class="stat.trend > 0 ? 'text-red-500' : 'text-green-500'">
              较上月 {{ stat.trend > 0 ? '+' : '' }}{{ stat.trend }}%
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="24" class="mb-8">
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <div class="text-lg font-medium">特殊学生类型分布</div>
            </template>
            <div ref="pieChartRef" class="h-64 w-full"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <div class="text-lg font-medium">特殊学生数量趋势</div>
            </template>
            <div ref="lineChartRef" class="h-64 w-full"></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 表格区域 -->
      <el-card shadow="hover">
        <el-table :data="students" style="width: 100%">
          <el-table-column v-for="col in columns" :key="col.key" :prop="col.key" :label="col.label">
            <template #default="scope" v-if="col.key === 'level'">
              <el-tag :type="scope.row.level === '严重' ? 'danger' : 'warning'" size="small">
                {{ scope.row.level }}
              </el-tag>
            </template>
            <template #default="scope" v-else-if="col.key === 'actions'">
              <div class="button-group">
                  <el-button type="primary" size="small" icon="Upload">导入</el-button>
                  <el-button size="small" icon="View">查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex items-center justify-between px-6 py-4">
          <div class="text-sm text-gray-600">
            共 {{ total }} 条记录
          </div>
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="10"
            :total="total"
            layout="prev, pager, next"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted,computed } from 'vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
import { Search, Plus, Upload, View } from '@element-plus/icons-vue';

const currentMenu = ref('special');
const currentTab = ref('all');
const currentPage = ref(1);
const total = ref(100);
const searchQuery = ref('');

const handleSelect = (key: string) => {
  currentMenu.value = key;
  ElMessage.success(`你选择了 ${key} 菜单`);
};

const menuItems = [
  { key: 'dashboard', label: '工作台', icon: 'HomeFilled' },
  { key: 'review', label: '审核管理', icon: 'CheckCircleFilled' },
  { key: 'special', label: '特殊学生管理', icon: 'UserFilled' },
  { key: 'graduate', label: '毕业学生去向统计', icon: 'School' }
];

const tabs = [
  { key: 'all', label: '全部' },
  { key: 'pending', label: '待处理' },
  { key: 'processed', label: '已处理' }
];

const statistics = [
  { label: '特殊学生总数', value: '156', trend: 5 },
  { label: '本月新增', value: '23', trend: -2 },
  { label: '待处理访谈', value: '12', trend: 8 },
  { label: '本周关注度', value: '89%', trend: 3 }
];

const columns = [
  { key: 'name', label: '学生姓名' },
  { key: 'id', label: '学号' },
  { key: 'type', label: '特殊类型' },
  { key: 'level', label: '轻重程度' },
  { key: 'records', label: '访谈记录' },
  { key: 'actions', label: '操作' }
];

const students = [
  { name: '张雨晨', id: '2021001001', type: '心理问题', level: '严重', records: '3次访谈' },
  { name: '李思远', id: '2021001002', type: '学习困难', level: '一般', records: '2次访谈' },
  { name: '王梓萱', id: '2021001003', type: '家庭困难', level: '严重', records: '0次访谈' },
  { name: '陈浩然', id: '2021001004', type: '心理问题', level: '一般', records: '1次访谈' },
  { name: '刘子豪', id: '2021001005', type: '学习困难', level: '严重', records: '5次访谈' }
];




const pieChartRef = ref<HTMLElement | null>(null);
const lineChartRef = ref<HTMLElement | null>(null);

onMounted(() => {
  // 饼图配置
  const pieChart = echarts.init(pieChartRef.value as HTMLElement);
  pieChart.setOption({
    animation: false,
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center'
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        data: [
          { value: 45, name: '心理问题' },
          { value: 30, name: '学习困难' },
          { value: 15, name: '家庭困难' },
          { value: 10, name: '其他' }
        ]
      }
    ]
  });

  // 折线图配置
  const lineChart = echarts.init(lineChartRef.value as HTMLElement);
  lineChart.setOption({
    animation: false,
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 132, 101, 134, 90, 230],
        type: 'line',
        smooth: true
      }
    ]
  });
});
</script>

<style scoped>
.el-menu {
  border-right: none;
}

.el-card {
  margin-bottom: 20px;
}

.special-student__chart {
  height: 300px;
}

.button-group {
display: inline-flex;
gap: 8px; /* 根据需要调整间距 */
}


</style>


